<script setup lang="ts">
import HeaderComponent from '@renderer/components/Header.vue'
import FooterComponent from '@renderer/components/Footer.vue'
import { useSqliteStore } from "@renderer/store/sqlite3"
console.log(useSqliteStore().queryBackendUrl())
</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-container>
                <el-header><header-component /></el-header>
                <el-main><router-view /></el-main>
                <el-footer><footer-component /></el-footer>
            </el-container>
        </el-container>

    </div>
</template>

<style scoped lang="scss">
.common-layout {
    height: 100%;
    width: 100%;

    .el-container:nth-child(1) {
        height: 100%;
    }

    .el-header {
        height: auto;
    }

    // .el-footer,
    .el-header {
        position: relative;
        // background-color: var(--el-color-primary-light-7);
        color: var(--el-text-color-primary);
    }


    .el-main {
        padding: 12px 24px;
    }

    // .el-header, .el-footer
    // .el-main {
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    // }

}
</style>
